<template>

  <nav id="sidebar">
    <!-- Sidebar Header-->
    <span class="text-uppercase text-gray-600 text-xs mx-3 px-2 heading mb-2" style="color: #2F80ED">菜单</span>
    <ul class="list-unstyled">
      <li :class="{'active': $route.path === '/dashboard/home'}" class="sidebar-item">
        <a class="sidebar-link" href="/dashboard/home">
          <svg class="svg-icon svg-icon-sm svg-icon-heavy">
            <img src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
          </svg>
          <span>首页 </span>
        </a>
      </li>
      <li :class="{'active': $route.path === '/dashboard/payment'}" class="sidebar-item">
        <a class="sidebar-link" href="/dashboard/payment">
          <svg class="svg-icon svg-icon-sm svg-icon-heavy">
            <img src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
          </svg>
          <span>支付数据</span>
        </a>
      </li>
      <li  :class="{'active': $route.path === '/dashboard/billing'}" class="sidebar-item">
        <a class="sidebar-link" href="/dashboard/billing">
          <svg class="svg-icon svg-icon-sm svg-icon-heavy">
            <img src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
          </svg>
          <span>流水账单</span>
        </a>
      </li>
      <li :class="{'active': $route.path === '/dashboard/call'}" class="sidebar-item">
        <a class="sidebar-link" href="/dashboard/call">
          <svg class="svg-icon svg-icon-sm svg-icon-heavy">
            <img src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
          </svg>
          <span>API调用工具</span>
        </a>
      </li>
      <li :class="{'active': $route.path === '/dashboard/profile'}" class="sidebar-item" >
        <a class="sidebar-link" href="/dashboard/profile">
          <svg class="svg-icon svg-icon-sm svg-icon-heavy">
            <img src="https://cdn.iextend.top/pay/favicon.svg" alt="ERROR">
          </svg>
          <span>个人信息</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';



</script>



<style>
nav#sidebar {
  color: #2F80ED;
}

nav#sidebar .avatar {
  width: 45px;
  height: 45px
}
nav#sidebar .sidebar-header .avatar {
  width: 45px;
  height: 45px
}

@media (min-width: 1200px) {
  nav#sidebar.shrinked .svg-icon {
    margin-right: 0
  }
  nav#sidebar.shrinked .svg-icon+span {
    padding-left: 0;
    border-left: none
  }
}

.active {
  border-left: 4px solid #2F80ED;
  background-color: white;
}

.sidebar-item.active>.sidebar-link .svg-icon {
  color: #2F80ED;
}


.sidebar-link {
  color: inherit;
  position: relative;
  padding: 1.2rem 1.2rem;
  text-decoration: none;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svg-icon-sm {
  width: 20px;
  height: 20px
}
</style>
